<template>
	<view class="wrap">
		<view class="heard" :style="{'background-color':themeColor.color}">
			<view>
				<u-avatar :src="userInfo?userInfo.avatar:''" :size="70"></u-avatar>
				<text class="nikename">{{userInfo?userInfo.nickname:''}}</text>
			</view>
		</view>
		<view class="cell-group">
			<u-cell-group>
				<u-cell :title="item.text" isLink :icon="item.icon" :iconStyle="{width: '58rpx',height: '58rpx'}" v-for="(item,index) in menuList" @click="clickMenu" :name="index"></u-cell>
			</u-cell-group>
		</view>
		<!-- 
		<view class="grid">
			<u-cell icon="setting-fill" title="个人设置" :border="false" :iconStyle="{color:themeColor.color}" :titleStyle="{color:themeColor.color}"></u-cell>
			<u-grid :border="false">
				<u-grid-item v-for="(menuItem,index) in menuList" :key="index" @click="click(menuItem)">
					<u--image :showLoading="true" :src="menuItem.icon" width="30px" height="30px" ></u--image>
					
					<text class="grid-text">{{menuItem.text}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="grid">
			<u-cell icon="grid-fill" title="猜您喜欢" :border="false" :iconStyle="{color:themeColor.color}" :titleStyle="{color:themeColor.color}"></u-cell>
			<u-grid :border="false">
				<u-grid-item v-for="(menuItem,index) in likeList" :key="index" @click="click(menuItem)">
					<u--image :showLoading="true" :src="menuItem.icon" width="30px" height="30px" ></u--image>
					
					<text class="grid-text">{{menuItem.text}}</text>
				</u-grid-item>
			</u-grid>
		</view> -->
		
				
		<view class="exit-button u-m-t-50">
			<u-button text="注 销" :color="themeColor.color" @click="exit"></u-button>
		</view>
		
		<!-- <view class="bottomcode">	  
			<text>{{serverInfo?serverInfo.copyright:''}}</text>
		</view> -->
		
		<!-- 选择颜色模态框 -->
		<!-- <u-overlay :show="colorModal" @click="colorModal = false">
			<view class="warp">
				<view class="rect" @tap.click>
					<text>选择主题</text>
					<view class="grids">
						<view class="padding-xs" v-for="(item, index) in themeList" :key="index" @tap="setColor(item)" :data-color="item.name">
							<view class="padding-tb" :class="'bg-' + item.name">
								{{ item.title }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-overlay> -->
	</view>
</template>

<script>
	var _this;
	import {mapState} from 'vuex';
	export default {
		computed:{
			...mapState({
				userInfo: state => state.user.userInfo,
				themeList: state => state.skin.themeList,
				serverInfo: state => state.app.serverInfo,
			})
		},
		data() {
			return {
				colorModal:false,
				likeList:[
					{
						text:'主题管理',
						icon:'../../static/user/skin.png',
						type:'skin'
					},
					{
						text:'注销登录',
						icon:'../../static/user/exit.png',
						type:'outlogin'
					}
				],
				menuList:[
					{
						text:'我的资料',
						icon:'../../static/user/zuliao.png',
						url:'/pages/user/userinfo/userinfo',
						type:'page'
					},
					{
						text:'我的借款',
						icon:'../../static/user/jiedai.png',
						url:'/pages/loans/nyloans',
						type:'page'
					},
					{
						text:'我的还款',
						icon:'../../static/user/haikuang.png',
						type:'page'
					},
					{
						text:'我的提款',
						icon:'../../static/user/tikuai.png',
						type:'page'
					},
					{
						text:'修改密码',
						icon:'../../static/user/xiugaimima.png',
						url:'/pages/user/rests/password',
						type:'page'
						
					},
					{
						text:'在线客服',
						icon:'../../static/user/ZAIXIAN.png',
						type:'service'
					}
				]
			}
		},
		methods: {
			clickMenu(e){
				let item = _this.menuList[e.name];
				switch(item.type){
					case 'skin':
						_this.colorModal = true;
						break;
					case 'outlogin':
						_this.exit();
						break;
					case 'page':
						_this.onPage(item);
						break;
					case 'service':
						uni.$emit('changeTab',2)
						break;
					default:
						break;
				}
			},
			click(item){
				switch(item.type){
					case 'skin':
						_this.colorModal = true;
						break;
					case 'outlogin':
						_this.exit();
						break;
					case 'page':
						_this.onPage(item);
						break;
					default:
						break;
				}
			},
			load() {
				_this = this;
				// console.log(this.userInfo);
			},
			exit(){
				_this.$app.showModal('是否退出当前登录账号？',function(){
					_this.$store.dispatch('Logout').then(res=>{
						uni.reLaunch({
							url:'../login/login'
						})
					});
				})
			},
			setColor(item){
				this.themeColor = item;
				this.$store.commit('setThemeColor', item);
				_this.colorModal = false;
			},
			onPage(item){
				if (!item.url)return;
				uni.navigateTo({
					url:item.url
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.cell-group{
		background-color: #fff;
	}
	.heard{
		height: 320rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.nikename{
		margin-top: 20rpx;
		display: grid;
		color: #fff;
	}
	.grid{
		padding: 20rpx 20rpx;
		.u-grid{
			padding: 30rpx 0;
			background-color: #fff;
			border-radius: 16rpx;
		}
	}
	.grid-text {
	        font-size: 14px;
	        color: #909399;
	        padding: 10rpx 0 20rpx 0rpx;
	        /* #ifndef APP-PLUS */
	        box-sizing: border-box;
	        /* #endif */
	    }
	.exit-button{
		padding-top: 30rpx;
		margin: 0 20rpx;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	.rect {
		margin: 0 20px;
		padding: 20px;
		border-radius: 5px;
		overflow: hidden;
		background-color: #fff;
		text-align: center;
	}
	
	.grids{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.padding-xs{
		padding: 5px;
		width: 20%;
	}
	.padding-tb {
	    padding-top: 15px;
	    padding-bottom: 15px;
		border-radius: 3px;
	}
	
	.bottomcode{
		font-size: 14px;
	    text-align: center;
	    color: #b9b9b9;
	    margin-top: 32px;
	}
</style>
